import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useMenuStore = defineStore('menu', () => {
    // 状态
    const activeItem = ref(0)
    const activeChildIndex = ref(null)
    const isCollapsed = ref(false)
    const showChild = ref({})

    const initShowChild = (menuItems) => {
        menuItems.forEach((item, index) => {
            showChild.value[index] = false
        })
    }
    // 切换折叠状态
    const toggleCollapse = () => {
        isCollapsed.value = !isCollapsed.value
    }
    // 设置当前活动菜单项
    const setActiveItem = (index) => {
        activeItem.value = index
    }
    const setShowChild = (val) => {
        showChild.value = val
    }
    const setActiveChildIndex = (index) => {
        activeChildIndex.value = index
    }
    // 切换子菜单显示状态
    const toggleChild = (index) => {
        showChild.value[index] = !showChild.value[index]
    }
    // 重置所有子菜单显示状态
    const resetChildren = () => {
        Object.keys(showChild.value).forEach(key => {
            showChild.value[key] = false
        })
    }
    return {
        activeItem,
        activeChildIndex,
        isCollapsed,
        showChild,
        initShowChild,
        toggleCollapse,
        setActiveItem,
        toggleChild,
        resetChildren,
        setActiveChildIndex,
        setShowChild,
    }
}, {
    persist: true
})